<template>
    <div class="login_wrapper" v-loading="loading">
        <img src="../../assets/login_logo.png" alt="" class="login_logo" />
        <div class="img-box">
            <img src="../../assets/logo_left_bg.png" ref="imgRef" />
        </div>

        <div class="main-box">
            <div class="form_box">
                <h1>深圳国际工业与应用数学中心官网后台管理系统</h1>
                <p class="sub">欢迎，请登录</p>
                <div class="form">
                    <SCForm :model="form" :rules="rules" ref="formRef">
                        <SCForm-item prop="username">
                            <div class="item-title"><SvgIcon icon-class="user" />账号</div>

                            <SCInput
                                v-model="form.username"
                                clearable
                                placeholder="请输入登录账号"
                            />
                        </SCForm-item>
                        <SCForm-item prop="password">
                            <div class="item-title"><SvgIcon icon-class="password" />密码</div>
                            <el-input
                                v-model="form.password"
                                show-password
                                clearable
                                placeholder="请输入登录密码"
                                @keyup.enter="handleLogin"
                            />
                        </SCForm-item>
                    </SCForm>
                    <SCButton type="primary" @click="handleLogin">登 录</SCButton>
                    <div class="copyright">Copyright © 深圳市大数据研究院</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/store/user";
import { nextTick, reactive, ref, onMounted } from "vue";
import { FormInstance } from "element-plus";
import { SCIcon } from "@sribd/sc-ui/lib";
import md5 from "md5";
import SvgIcon from "@/components/SvgIcon.vue";

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const imgRef = ref();
const form = reactive({
    username: "",
    password: "",
});

const loading = ref(false);
const formRef = ref<FormInstance>();

const rules = {
    username: [
        {
            required: true,
            message: "请输入登录账号",
        },
    ],
    password: [
        {
            required: true,
            message: "请输入登录密码",
        },
    ],
};

async function handleLogin() {
    if (!formRef.value) return;
    const valid = await formRef.value.validate();
    if (!valid) return;
    let res: any;
    try {
        loading.value = true;
        await userStore.login(form.username.trim(), md5(form.password) as string);
        next();
    } catch (error: any) {
        console.log(error.msg || "登录失败", error);
    } finally {
        loading.value = false;
    }
}

const next = () => {
    try {
        if (route.query.redirect) {
            router.push(decodeURIComponent(route.query.redirect as string));
        } else {
            router.push("/");
        }
    } catch (error) {
        router.push("/");
    }
};
</script>

<style lang="scss" scoped>
$ui-width: 1680px;

@function px2vw($px) {
    @return calc($px / $ui-width) * 100vw;
}
.login_wrapper {
    height: 100vh;
    background: url("../../assets/bg@2x.png") no-repeat;
    background-size: cover;
    display: flex;
    overflow: auto;
    .img-box {
        height: 100%;
        width: px2vw(876px);
        // min-width: 876px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        img {
            width: px2vw(679px);
            height: px2vw(634px);
        }
    }

    .main-box {
        height: 100%;
        width: calc(100% - px2vw(876px));
        display: inline-block;
        position: relative;

        .form_box {
            position: absolute;
            top: 50%;
            left: px2vw(105px);
            transform: translateY(-50%);
            width: px2vw(400px);
            min-width: 400px;
            // height: px2vw(494px);
            // min-height: 450px;
            padding-bottom: px2vw(30px);
            background: #ffffff;
            box-shadow: 0px 8px 20px 0px rgba(25, 28, 104, 0.1);
            border-radius: 16px;
            border: 1px solid #dadcdf;
            display: flex;
            flex-direction: column;
            align-items: center;
            .item-title {
                height: px2vw(16px);
                display: flex;
                align-items: center;
                margin-bottom: px2vw(12px);
                .user {
                    background: url(../../assets/icon_user@2x.png);
                    background-size: px2vw(16px) px2vw(16px);
                    margin-right: 6px;
                }
                .password {
                    background: url(../../assets/icon_password@2x.png);
                    background-size: px2vw(16px) px2vw(16px);
                    margin-right: 6px;
                }
            }

            h1 {
                line-height: px2vw(34px);
                font-size: px2vw(26px);
                font-weight: 500;
                margin-bottom: px2vw(16px);
                margin-top: px2vw(50px);
            }
            .sub {
                font-size: px2vw(18px);
                line-height: px2vw(24px);
                color: #333;
                margin: 0;
                margin-bottom: px2vw(40px);
            }
            .svg-icon {
                margin-right: 8px;
                width: px2vw(16px) !important;
                height: px2vw(16px) !important;
            }
            :deep(.el-form) {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
            :deep(.el-form-item__content) {
                font-size: px2vw(14px);
                color: #1b181b;
                width: px2vw(320px);
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                flex: 1;
                .sc-input {
                    width: 100%;
                }
            }

            :deep(.sc-input) {
                margin-top: 0px;
            }
            :deep(.el-input__inner) {
                padding: px2vw(13px) px2vw(12px);
                height: px2vw(38px);
                min-height: 38px;
            }
            :deep(.sc-button) {
                width: px2vw(320px);
                height: px2vw(40px);
                margin-top: px2vw(10px);
                margin-bottom: px2vw(60px);
                font-size: px2vw(18px);
                min-width: 320px;
                min-height: 40px;
            }
            :deep(.el-form-item__error) {
                font-size: px2vw(12px);
            }
            .form {
                display: flex;
                flex-direction: column;
                align-items: center;
                :deep(.el-form-item) {
                    margin-bottom: px2vw(20px);
                    .el-input__inner {
                        font-size: px2vw(16px);
                    }
                }
            }
            .copyright {
                height: px2vw(14px);
                font-size: px2vw(14px);
                font-weight: 400;
                color: #1b181b;
                line-height: px2vw(14px);
                opacity: 0.7;
            }
        }
    }
    .login_logo {
        position: absolute;
        top: px2vw(20px);
        left: px2vw(30px);
        width: px2vw(250px);
    }
}
</style>
